<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-row :gutter="20" style="padding: 15px 0">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】: {{ filterList(questionsList.questionType, true) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】:{{ questionsList.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】:{{ filterList(questionsList.difficulty, false) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】:{{ questionsList.tags }}
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】:{{ questionsList.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】:{{ questionsList.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】:{{ questionsList.direction }}
          </div></el-col
        >
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
    <!-- 题干 -->
    <hr />
    <div class="main">
      <p>【题干】：</p>
      <p style="color: blue">{{ toHtml(questionsList.question) }}</p>
      <p>
        {{ filterList(questionsList.questionType, true) }}
        选项：（以下选中的选项为正确答案）
      </p>
      <el-form>
        <el-form-item>
          <!-- 单选1 -->
          <div v-if="+questionsList.questionType === 1">
            <el-radio-group v-model="radio">
              <el-radio
                v-for="item in questionsList.options"
                :key="item.id"
                :label="item.isRight"
                >{{ item.title }}{{ item.isRight }}</el-radio
              >
            </el-radio-group>
          </div>
          <!-- 多选2 -->
          <div v-else-if="+questionsList.questionType === 2">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in questionsList.options"
                :label="item.isRight"
                :key="item.id"
                >{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <!-- 简答3 -->
          <div v-else>
            <p>简答</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <hr />
    <!-- 底部 -->
    <div class="footer">
      <div>
        <span>【参考答案】：</span>
        <el-button type="danger" @click="videoIsShow = true"
          >视频答案预览</el-button
        >
        <video
          style="display: block; width: 55%; margin: 15px 0"
          v-if="videoIsShow"
          :src="questionsList.videoURL"
          controls="controls"
        ></video>
      </div>
      <hr />
      <div>
        <span>【参考答案】：</span>
        <el-link href="https://element.eleme.io" target="_blank" type="info">{{
          toHtml(questionsList.answer)
        }}</el-link>
      </div>
      <hr />
      <div>
        <span>【题目备注】：</span>
        <el-link href="https://element.eleme.io" target="_blank" type="info">{{
          questionsList.remarks
        }}</el-link>
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close">
      <el-button type="primary" @click="close()">关闭</el-button>
    </div>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { html2Text } from '@/utils/index'

export default {
  name: '',
  data () {
    return {
      radio: 1,
      id: '',
      questionsList: [],
      questionsTypeList: [
        { id: '1', type: '单选' },
        { id: '2', type: '多选' },
        { id: '3', type: '简答' }
      ],
      Difficulty: [
        { id: '1', type: '简单' },
        { id: '2', type: '一般' },
        { id: '3', type: '困难' }
      ], // 难度数据
      checkList: [1],
      videoIsShow: false
    }
  },
  created () {
    setTimeout(() => {
      this.loadDetail()
    }, 1)
  },
  computed: {},
  methods: {
    async loadDetail () {
      console.log(this.id)
      const { data } = await detail({
        id: this.id,
        isNext: false
      })
      this.questionsList = data
    },
    // 筛选下拉项试题类型,难度
    filterList (val, flag) {
      if (flag) {
        const whiteList = ['1', '2', '3', 1, 2, 3]
        if (whiteList.includes(val)) {
          return this.questionsTypeList.find((item) => item.id === val).type
        } else {
          return '废数据'
        }
      } else {
        const whiteList = ['1', '2', '3', 1, 2, 3]
        if (whiteList.includes(val)) {
          // eslint-disable-next-line eqeqeq
          return this.Difficulty.find((item) => item.id === val).type
        } else {
          return '废数据'
        }
      }
    },
    // 使用将数据中的标签转换成内容
    toHtml (val) {
      return html2Text(val)
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-checkbox,
.el-radio {
  display: block;
  margin: 25px;
}
.el-form-item {
  pointer-events: none;
}
</style>
